<template>
  <div class="book-list-container">
    <div v-for="book in books" :key="book.id" class="book-card">
      <router-link
          :to="{ name: 'BookDetail', params: { bookType: book.bookType }, query: { id: book.id } }"
          class="card-book-link"
      >
        <img :src="book.cover" alt="Book Cover" class="book-cover">
        <div class="book-details">
          <h3 class="book-title">{{ book.title }}</h3>
          <p class="book-author">作者: {{ book.author }}</p>
          <el-rate
              v-model="book.rating"
              disabled
              show-score
              text-color="#ff9900">
          </el-rate>
          <p class="book-summary">{{ book.summary }}</p>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>


export default {
  name: 'BookCard',
  props: {
    books: {
      type: Array,
      required: true
    }
  }
}
</script>
<style>
.card-book-link{
  text-decoration: none;
  display: flex;
}
</style>